<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"  :offset="[26,80]"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiperHeight">
			<swiper-item class="swiper-item" >
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
					<u-cell-group title="点击阅读">
						<u-cell-item
						 icon="volume-fill"
						 v-for="(item,index) in readList"
						:title="item.resource" :key="item.id" @click="goDetailPage(item)">
						</u-cell-item>
					</u-cell-group>
				</scroll-view>
			</swiper-item>
			<swiper-item  class="swiper-item">
				<scroll-view scroll-y >
				</scroll-view>
					<u-cell-group title="点击阅读">
						<u-cell-item icon="volume-fill"  v-for="(item,index) in noReadList"
						:title="item.resource" :key="item.id" @click="goDetailPage(item)"> <u-badge type="error" :is-dot="true" :absolute="true" :offset="[44,70]"></u-badge></u-cell-item>
					</u-cell-group>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '已读消息',
				}, {
					name: '未读消息',
					count:0
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 1, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 1, // swiper组件的current值，表示当前那个swiper-item是活动的
				noticeList:[],
				readList:[],
				noReadList:[]
				
			}
		},
		onShow() {
			this.getNoticeInfo()
		},
		methods: {
			async getNoticeInfo() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'InformationController/queryinformation',
					data:{
						userid:getApp().globalData.userid
					}
				})
				
				this.noticeList = res 
				this.readList = res.filter(item=>{
					return item.isTrue == 1
				})
				this.noReadList = res.filter(item=>{
					return item.isTrue == 0
				})
				this.list[1].count = this.noReadList.length
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			//由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			//swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
		async	goDetailPage(item){
				let info = JSON.stringify(item)
				console.log(item);
				console.log(info);
				if( item.isTrue == 0){
					const {data:res} = await this.$myRequest({
						url:'InformationController/readInformation',
						data:{
							id:item.id
						}
					})
				}
				uni.navigateTo({
					url:`/pages/myinfo/components/noticeInfo/detailInfo?data=${info}`,
				})
				
				this.getNoticeInfo()
			}
		}
	}
</script>

<style lang="scss">
.swiper-item{
	height: 1000rpx;
}

.swiperHeight{
	height: 100vh;
}
</style>
